<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue.js"></script>

</head>
<body>

<div id="div1">

    <div v-if="number>=100"> v-if是否显示1 </div>
    <div v-else-if="50<number&&number<=99"> v-else-if </div>
    <div v-else> v-else</div>
    <button @click="handler">切换flag的值</button>
    <div v-show="flag">v-show</div>    <!--true显示内容，false不显示-->




    <div v-if="str=='abc'"> 显示字符串 </div>

</div>

<script>

    const vueObj = new Vue({
        el:'#div1',
        data: {
            number: 51,
            str: "abc",
            flag: true,

        },
        methods:{
            //点击修改样式
            handler:function(){
                this.flag = !this.flag;
            },
        }
    });
</script>
</body>
</html>